<script>
import TreeCard from '@/components/TreeCard/index.vue'
import CardItems from '@/components/CardItems/index.vue'
import { cardConfig } from './config/cardConfig'
import { popConfig } from './config/popConfig'
import { headerConfig } from './config/tableConfig'
import { selectConfig } from './config/selectConfig'
import { treeConfig } from '@/views/sceneManage/sceneProject/config/cardConfig'

export default {
  name: 'CarbonEmissionForecastDataActivity',
  components: { CardItems, TreeCard },
  computed: {
    treeConfig() {
      return treeConfig['scene-project'] || {}
    },
    /**
     * 卡片配置
     */
    cardConfig() {
      return cardConfig['carbonEmissionForecastDataActivity'] || {}
    },
    /**
     * 弹窗配置
     */
    popConfig() {
      return popConfig['carbonEmissionForecastDataActivity'] || {}
    },
    /**
     * 筛选配置
     */
    selectConfig() {
      return this.selectList || []
    },
    /**
     * 表头配置
     */
    headerConfig() {
      return headerConfig['carbonEmissionForecastDataActivity'] || []
    }
  },
  data() {
    return {
      isExpand: true,
      expandLeft: 200,
      nodeSelect: {},
      selectList: selectConfig['carbonEmissionForecastDataActivity']
    }
  },
  methods: {
    clickBtn(btn) {
      if (btn.id === 'all') {
        this.handleNodeClick({ type: 0 })
      }
    },
    handleNodeClick(data) {
      this.type = data.type
      if (data.type === 1) {
        this.nodeSelect = { sceneProjectId: data.id }
      } else if (data.type === 2) {
        this.nodeSelect = { sceneEdificeId: data.id }
      } else if (data.type === 3) {
        this.nodeSelect = { sceneFloorId: data.id }
      } else if (data.type === 4) {
        this.nodeSelect = { id: data.id }
      } else {
        this.nodeSelect = {}
      }
      this.$nextTick(() => {
        this.$refs.tableCard?.getData()
      })
    },
    selectChange(selectData, prop, selectList) {

    }
  }
}
</script>

<template>
  <div class="data-box">
    <div class="TreeCard-box" :class="{'is-expand':!isExpand}" :style="{width: `${expandLeft}px`}">
      <TreeCard
        class="tree-card"
        :tree-config="treeConfig"
        @clickBtn="clickBtn"
        @handleNodeClick="handleNodeClick"
      />
    </div>
    <div class="CardItems-box">
      <CardItems
        ref="tableCard"
        :outer-params="nodeSelect"
        :card-config="cardConfig"
        :pop-config="popConfig"
        :select-config="selectConfig"
        :header-config="headerConfig"
      />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.data-box {
  display: flex;
  width: 100%;
  height: 100%;

  .CardItems-box {
    flex: 1;
  }
}
</style>
